<template>
  <div style="position: relative">
    <div style="position: absolute; top:10px; right: 10px; z-index: 900">
      <!--      <el-button type="primary" icon="Plus" circle @click="newLine"/>-->
      <el-button type="primary" icon="Delete" circle @click="clearLine"/>
      <el-button type="primary" circle @click="editLine">编辑</el-button>
      <el-button type="primary" circle @click="endEdit">结束</el-button>
      <!--      <el-button type="primary" @click="startDrawing">开始绘制</el-button>-->
      <!--      <el-button type="primary" @click="stopDrawing">停止绘制</el-button>-->
    </div>
    <div id="container-line" :style="{width,height}"></div>
  </div>
</template>

<script>
export default {
  name: 'GaodeMapLine',
  props: {
    modelValue: {
      type: String,
      default: undefined
    },
    // 线的颜色
    strokeColor: {
      type: String,
      default: 'red'
    },
    // 地图中心点
    center: {
      type: Array,
      default: () => {
        return [108.94878, 34.22259]
      }
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '790px'
    }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      map: null, // 初始化 gMap 对象
      path: [],
      emitting: false,
      polylineEditors: null,
      polyline: null,
      isDrawing: true // 是否正在绘制折线
    }
  },
  watch: {
    modelValue: {
      immediate: true,
      handler(val) {
        if (this.emitting) {
          return
        }
        console.log(val, 'val')
        if (val) {
          this.path = JSON.parse(val)
          this.$nextTick(() => {
            this.polyline.setPath(this.path)
          })
        }

        // this.centerLocation = this.location
      }
    }
  },
  mounted() {
    // DOM初始化完成进行地图初始化
    this.initMap()
  },
  methods: {
    editLine() {
      this.isDrawing = false
      this.polylineEditors.open()
    },

    clearLine() {
      this.path = []
      this.isDrawing = true
      this.isDrawing = true
      this.initMap()
    },
    endEdit() {
      this.isDrawing = true
      this.polylineEditors.close()
      const newPath = this.polyline.getPath()
      console.log('更新后的线坐标:', newPath)
      this.path = newPath.map(item => {
        return [item.lng, item.lat]
      })
      this.$emit('update:modelValue', JSON.stringify(this.path))
    },

    initMap() {
      const that = this
      that.map = new this.$AMap.Map('container-line', { // 设置地图容器id
        viewMode: '2D', // 是否为3D地图模式
        zoom: 15, // 初始化地图级别
        center: that.center // 初始化地图中心点位置
      })
      this.$AMap.plugin(['AMap.ToolBar'], (ToolBar) => {
        this.map.addControl(new this.$AMap.ToolBar())
        this.map.addControl(new this.$AMap.ControlBar({
          position: {
            right: '20px',
            top: '50px'
          },
          showControlButton: true // 是否显示倾斜、旋转按钮。默认为 true
        }))
      })
      that.polyline = new this.$AMap.Polyline({
        path: this.path,
        borderWeight: 5, // 线条宽度，默认为1
        strokeColor: this.strokeColor, // 线条颜色
        strokeOpacity: 0.8, // 线条透明度
        fillOpacity: 0.35, // 填充透明度
        doubleClickZoom: false, // 禁用双击缩放功能
        lineJoin: 'round' // 折线拐点连接处样式
      })
      // 折线 polyline 对象添加到 Map
      that.map.add(this.polyline)

      that.map.plugin(['AMap.PolylineEditor'], function () {
        // 实例化折线编辑器，传入地图实例和要进行编辑的折线实例
        that.polylineEditors = new that.$AMap.PolylineEditor(that.map, that.polyline)
      })

      // 监听地图点击事件
      that.map.on('click', this.handleClick)
    },
    handleClick(e) {
      if (this.isDrawing) {
        this.path.push([e.lnglat.lng, e.lnglat.lat])
        this.polyline.setPath(this.path)
        // this.polylineEditors.open()
      }
    }
    // startDrawing() {
    //   this.isDrawing = true
    //   // this.path = []
    // },
    // stopDrawing() {
    //   this.isDrawing = false
    // }
  }
}
</script>

<style scoped lang="scss">
#container-line {
  width: 100%;
  height: 790px;
  //margin: 100px auto;
  //border: 1px solid red;
}
</style>
